<template>
  <div class="form-container">
    <div class="form-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>咨询公告</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/noticeList' }">公告列表</el-breadcrumb-item>
        <el-breadcrumb-item>添加公告</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form-content">

      <el-form ref="form" :model="form" :rules="rules" label-width="126px">

        <el-form-item label="公告标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入公告标题"></el-input>
        </el-form-item>

        <el-form-item label="公告内容" prop="content">
          <el-col>
            <el-input type="textarea" v-model="form.content"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="所属卖场" prop="market_id">
          <el-col>
            <el-select
              v-model="form.market_id"
              clearable
              @change="selectMarket"
              filterable
              placeholder="请选择卖场"
            >
              <el-option
                v-for="item in marketList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label="是否发布">
          <el-switch v-model="form.is_pub" ></el-switch>
        </el-form-item>
        <el-form-item label="排序">
          <el-col :span="5">
            <el-input v-model="form.sort" placeholder="数字越大越靠后"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-row>
            <el-button type="danger" @click="confirmAdd('form')">立即保存</el-button>
            <el-button type="default" @click="cancel()">返回</el-button>
          </el-row>
        </el-form-item>

      </el-form>
    </div>
  </div>

</template>

<script>

  export default {
    data() {
      return {
        validate: false,
        activeName: 'first',
        types:[],
        form: {
          title: '',
          is_pub: true,
          sort: 0,
          group_id: '1',
          content:'',
          market_id:'',//卖场id
        },
        rules: {
          title: [
            {required: true, message: '请输入公告标题', trigger: 'blur'},
          ],
          content: [
            {required: true, message: '请输入公告内容', trigger: 'blur'},
          ],
          market_id: [
            {required: true, message: '请选择卖场', trigger: 'blur'},
          ]
        },
        marketList: [],
      }
    },
    mounted(){
      this.remoteMethod();
    },
    methods: {
      // 获取卖场列表
      remoteMethod() {
        this.$http.post("/api/root/Market/marketList").then((res) => {
          console.log(res, "卖场列表");
          if (res.code == 1) {
            this.marketList = res.data ? res.data : [];
          }
        });
      },
      // 选择卖场
      selectMarket() {
      },

      confirmAdd(form) {
        this.validateFormData(form);
        if (this.validate) {
          const _ths = this;
          this.$http.post('/api/root/notice/add', {...this.form})
            .then(rest => {
              if (rest.msg == 'ok') {
                this.$message.success('添加成功');
                setTimeout(function () {
                  _ths.$router.push({name: 'noticeList'})
                }, 800)
              } else {
                this.form = {
                  ...this.form,
                };
                this.$message.error(rest.msg);
              }
            })
        }
      },
      cancel() {
        this.$router.push({name: 'noticeList'})
      },

      /**
       * 验证表单数据
       * @param form
       */
      validateFormData(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            this.$message({
              message: '表单数据未填写完整,操作失败！',
              type: 'warning'
            });
            return false;
          }
          this.validate = true;
          return true;
        })
      },

    }
  }
</script>
<style lang="less" scoped>
  @import "index.less";
</style>